<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<script src="../js/auto-size.js"></script>
		<!--<script src="../js/jquery-1.11.1.js"></script>-->
		<title>志尚观点</title>
	</head>

	<body>
		<div class="header"><img src="../img/ic_back_white@3x.png" />志尚观点</div>
		<div class="mui-scroll-wrapper" id="mui-scroll-wrapper">
			<div class="mui-scroll" style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-box-pack: center; display: flex;flex-direction: column;align-items: center;">
				<!--这里放置真实显示的DOM内容-->
				<!--列表-->
				<div class="list-box"></div>
				<img src="../img/loading2.gif" alt="加载中..." hidden class="loading-img" id="loading-img" />
			</div>
		</div>
		
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.lazyload.js"></script>
		<script src="../js/mui.lazyload.img.js"></script>
		<script src="../js/ejs.min.js"></script>
		
		<!--摸版-->
		<script type="text/template" id="list-template">
			<$ for(var i = 0;i < data; i++) { $>
				<div class="list-itemBox">
					<img src="" alt="" class="left-img HUI_Lazy" data-lazyload="http://pic9.nipic.com/20100809/2029588_223105088754_2.jpg" />
					<div class="right">
						<a href="">
							<p class="title">股市的钱都被谁转走了？</p>
							<p class="time">2017.07.01</p>
							<p class="type"><span class="type-text">分类：谈股论金</span> <span class="type-text2">免费</span></p>
						</a>
					</div>
				</div>
			<$ } $>
		</script>
		
		<script>
			
			//初始化
			mui.init();
			mui('.mui-scroll-wrapper').scroll({
				deceleration: 0.0005, //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
				indicators: true
			});
			
			//监听滚动事件
			mui("#mui-scroll-wrapper").on("scroll", ".mui-scroll", function() {
				let scroll_distance = mui('.mui-scroll-wrapper').scroll().y;
				let scroll_bottom = mui('.mui-scroll-wrapper').scroll().maxScrollY;
				loadingImg(scroll_distance, scroll_bottom, document.querySelector("#loading-img")); //document.querySelector兼容ie8
				lazyLoad.refresh(true);
			});
			
			//摸版
			(function(){
				ejs.delimiter = "$";
				let list_template = document.querySelector("#list-template").innerHTML;
				let data = 20;
				let html = ejs.render(list_template, {data:data});  
		        document.querySelector(".list-box").innerHTML = html;  
			})()
			
			//加载动画图
			function loadingImg(d, b, el) {
				if(d == b) {
					el.removeAttribute("hidden");
				} else {
					el.setAttribute("hidden", "true");
				}
			}

			//懒加载
			var lazyLoad = mui(".mui-scroll").imageLazyload({
				placeholder: '../img/60x60.gif',
				destroy: false
			});
			
		</script>
	</body>

</html>